<template>
  <div>
    <ant-modal
      modalWidth="300"
      modalHeight="200"
      :visible="open"
      :modal-title="title"
      @cancel="cancel"
      :adjustSize="false"
    >
      <a-form-model
        ref="form"
        :model="form"
        :rules="rules"
        slot="content"
        layout="vertical"
      >
        <a-row>
          <a-col>
            <a-radio-group v-model="form.chose" button-style="solid">
              <a-radio
                v-for="(item, index) in choseOptions"
                :key="index"
                :value="item.value"
              >
                {{ item.label }}
              </a-radio>
            </a-radio-group>
          </a-col>
        </a-row>
      </a-form-model>
      <template slot="footer">
        <a-button @click="cancel"> 取消 </a-button>
        <a-button type="primary" @click="typeModalOk"> 确定 </a-button>
      </template>
    </ant-modal>
  </div>
</template>
<script>
import AntModal from "@/components/pt/dialog/AntModal";
export default {
  components: {
    AntModal,
  },
  props: {
    choseOptions: {
      type: Array,
      required: true,
    },
    title: {
      type: String,
      default: "选择",
    },
  },
  data() {
    return {
      open: false,
      form: { chose: this.choseOptions[0].value },
      rules: {
        chose: [{ required: true, message: "不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    showModal() {
      this.open = true;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.$emit("close");
    },
    typeModalOk: function () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.open = false;
          this.$emit("ok", this.form.chose);
        } else {
          return false;
        }
      });
    },
  },
};
</script>
